<template>
  <div class="subPage">
    <div>
        <nav-bar 
        :title="'互联网医院检查申请单'" 
        position="center" 
        color='linear-gradient(90deg, #547BF4 0%, #3F4ADE 100%);' 
        :rowColor="'white'" 
        :goBack="goBack" 
        :isMsg='false' 
        fontColor='#fff' ></nav-bar>
    </div>
    <div class="content">
      <div class="topBox">
        <img :src="check_wdrm" />
      </div>
      <!-- tab1列表 -->
     <div class="scrollCont">
        <div class="allList">
          <div class="msg_name needPadding" >
            <span class="fl boldFont" >{{detailsInfo.regular_name}}</span>
            <span :class="['fr', 'status',{'color1':detailsInfo.status==='1'||detailsInfo.status==='3'||detailsInfo.status==='7'||detailsInfo.status==='8'},
            {'color2':detailsInfo.status==='2'||detailsInfo.status==='10'||detailsInfo.status==='0'},
            {'color3':detailsInfo.status==='11'||detailsInfo.status==='12'},{'color4':detailsInfo.status==='5'},
            {'color5':detailsInfo.status==='13'||detailsInfo.status==='6'||detailsInfo.status==='9'},]" >
              {{detailsInfo.status_str}}
            </span>
          </div>
          
          <div v-for="(item, index) in detailsInfo.result_list" :key="index" style="position:relative">
            <div :class="['msg_main','needPadding',{'notop':index!==0}]" >
              <span v-if="item.type === 2 || item.type === 3" :class="['redMarked', {'marginTop':index>0}]" ></span>
              <ul :class="[{'boldFont':item.info[0].type===4}, {'baseInfo':item.info[0].type===1}, {'check_content':item.info[0].type===2}]" >
                <!-- 粗字体 执行科室等字段 -->
                <li v-for="(msg, i) in item.info" :key="i" v-if="item.info[0].type===4">
                  <span>{{msg.desc}}: </span>
                  {{msg.text!==null?msg.text:msg.text?msg.text:'暂无'}}
                </li>

                <!-- 性别、年龄； 医师，开具时间等字段  左：右-->
                <li v-for="(msg, i) in item.info" :key="i" v-if="item.info[0].type===1">
                  <rich-text class="richText grayFont" space="ensp" :nodes="msg.desc"></rich-text>
                  <span class="grayFont">:</span>
                  <span class="normalFont" >&nbsp;&nbsp;{{msg.text!==null?msg.text:msg.text?msg.text:'暂无'}}</span>
                </li>

                <!-- 检查项目、检查目的等字段  占一整行-->
                <li v-for="(msg, i) in item.info" :key="i" v-if="item.info[0].type===2">
                  <div class="grayFont" v-if="msg.type!==3">{{msg.desc}}:</div>
                  <div class="normalFont" v-if="msg.type!==3">{{msg.text!==null?msg.text:msg.text?msg.text:'暂无'}}</div>
                  <span class="grayFont" v-if="msg.type===3">{{msg.desc}}:</span>
                  <span class="normal" v-if="msg.type===3">{{msg.text!==null?msg.text:msg.text?msg.text:'暂无'}}</span>
                </li>
              </ul>
            </div>
            <div class="check_center" v-if="item.info[0].type!==5 && index<detailsInfo.result_list.length-1">
              <img :src="check_center" alt="">
            </div>
            <div class="msg_bottom" v-if="item.info[0].type===5">
              <img :src="item.info[0].status === '2'?infoIcon:successIcon">
              <span :class="item.info[0].status==='2'?'info':'success'">{{item.info[0].text}}</span>
            </div>
            <div v-if="index === detailsInfo.result_list.length-1" class="msg_bottom footer">
              (申明:本报告内容仅供参考，实际以纸质为准)
            </div>
          </div>
          <div style="height:50rpx" ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let app = getApp()
  let store = app.store
  import api from '@/api/api'
  import navBar from '@/components/navBar'
  import { mapState } from 'vuex'
  const { $Toast, $Message } = require('../../../../../static/iview/base/index')
  export default {
    components: {
      navBar
    },
    data () {
      return {
        check_wdrm: '',
        check_center: require('../../../../../static/images/check_center.png'),
        infoIcon: require('../../../../../static/images/infoIcon.png'),
        successIcon: require('../../../../../static/images/successIcon.png'),
        detailsInfo: {},
        noDataImg: '',
        imgUrl: '',
        regular_id: 0,
        queryInfo: {},
        spacingType: 'ensp'
      }
    },
    onShow(){
    },
    onLoad(options){
      this.queryInfo = options
      this.queryPrescriptionList()
      wx.getSystemInfo({ // 判断机型
      success:(res)=>{
        console.log(res,'机型',res.system.indexOf('iOS')!==-1)
        if(res.platform == "ios" || res.system.indexOf('iOS')!==-1){
          this.spacingType = 'ios'
        } else{
          this.spacingType = 'android'
        }
        console.log(this.spacingType)
      }
    })
    },
    onUnload() {
      this.detailsInfo = {}
    },
    mounted () {
      this.imgUrl = api.imgUrl
      this.noDataImg = this.imgUrl + 'noData.png'
      this.check_wdrm = this.imgUrl + 'check_wdrm.png'
    },
    methods: {
      // 去支付
      goPay (item) {
        this.$router.push(`/pages/center/child/address/main?orderno=${item.orderno}&pay=${item.ordersum}&type=${item.point_type}&orderId=${item.order_id}`)
      },
      goDetails (data) {
        console.log(data)
      },
      goBack() {
        this.$router.go(-1)
      },
      // 查询全部信息
      queryPrescriptionList () {
        let that = this
        let param = that.queryInfo
        this.$api.inspectionCheckOrderThird(param, {'showLoading': true}).then(res => {
          that.detailsInfo = res.data
          res.data.result_list.forEach((ele,index)=>{
            ele.info.forEach((e,i)=>{
              if (e.desc) {
                let arr = e.desc.replace(':','').split("") //  添加空格 使文字平分宽度
                if (this.spacingType === 'ios') {
                  that.detailsInfo.result_list[index].info[i].desc = arr.length===2?arr.join(`       `):arr.length===3?arr.join(`  `):arr.join('')
                  return
                }
                that.detailsInfo.result_list[index].info[i].desc = arr.length===2?arr.join(`    `):arr.length===3?arr.join(` `):arr.join('')
              }
              if (e.text === null || e.text.length===0) {
                that.detailsInfo.result_list[index].info[i].text = '暂无'
              }
            }) 
          })
        })
        console.log(that.detailsInfo)
      }
    }
  }
</script>

<style scoped lang='less'>
.subPage {
    display: flex;
    flex-direction: column;
  }
  .subTop {
    // border-top: 1rpx solid #DDDDDD;
    // border-bottom: 1rpx solid #DDDDDD;
    height: 42px;
  }
  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden ;
    position: relative;
    background: url('../../../../../static/images/background2.png') no-repeat 0 0 ;
    background-size: 100% 318rpx;
    background-color: #fff;
    .scrollCont {
      flex: 1;
      overflow-x: hidden ;
      overflow-y: scroll;
    }
    .scrollCont::-webkit-scrollbar {
      display:none
    }
    .topBox {
      height: 110rpx;
      color:rgba(255,255,255,1);
      margin-bottom: 10rpx;
      // padding-left: 68rpx;
      .title {
        font-size:40rpx;
        font-weight:500;
        font-weight: 500;
        margin-top: 50rpx;
        margin-bottom: 10rpx;
      }
      img {
        height: 65rpx;
        width: 640rpx;
        margin-top: 22rpx;
        margin-left: 50%;
        transform: translateX(-50%);
      }
    }
    .allList {
      height: 100%;
      margin: 0rpx 30rpx;
      // transform: translateY(-55rpx);
      // padding-top: 60rpx;
      .needPadding {
        padding: 0 30rpx 0 50rpx;
      }
      .notop {
        padding-top: 0rpx!important;
      }
      .msg_name {
        height: 90rpx;
        line-height: 90rpx;
        width: 100%;
        background-color: #F9F9F9;
        border-radius:8rpx 8rpx 0px 0px;
        box-sizing: border-box;
        // box-shadow:0rpx 2rpx 12rpx 1rpx rgba(0,0,0,0.11);
        .boldFont {
          font-size:36rpx;
          font-weight:550;
          color:rgba(51,51,51,1);
        }
        .status {
          line-height: 90rpx;
          font-size: 30rpx;
          color: #224BC6;
        }
        .color1 {
          color: #258FF8;
        }
        .color2 {
          color: #FF7F29;
        }
        .color3 {
          color: #10C15B;
        }
        .color4 {
          color: #D0D0D0;
        }
        .color5 {
          color: #F82625;
        }
      }
      .msg_main {
        // position: relative;
        background-color: #fff;
        padding-top: 36rpx;
        box-shadow: 0rpx 12rpx 12rpx 1rpx rgba(0,0,0,.11);
        .boldFont {
          font-size:36rpx;
          font-weight:550;
          color:rgba(51,51,51,1);
        }
        .boldFont2 {
          font-size:32rpx;
          font-weight:550;
          line-height: 50rpx;
          padding-right: 20rpx;
          span:nth-child(1) {
            display: block;
            display: flex;
            width: 125rpx;
          }
        }
        .redMarked {
          position: absolute;
          left: 0;
          width:8rpx;
          height:24rpx;
          background:rgba(255,113,92,1);
          border-radius:4rpx;
          top: 13rpx;
        }
        .marginTop {
          top: 18rpx;
        }
        .grayFont {
          font-size: 30rpx;
          color: #666;
        }
        .normalFont {
          font-size: 30rpx;
          color: #333;
        }
        ul {
          height: 100%;
          width: 100%;
          li {
            display: block;
            min-height: 55rpx;
            span{
              display: inline-block;
            }
          }
        }
        .baseInfo {
          li {
            span {
              display: inline-block;
            }
            span:nth-child(1) {
              width: 125rpx;
              text-align: justify;
              display: inline-block;
              text-align-last: justify;
              vertical-align: center;
            }
            span:nth-child(1) :after{
              display:inline-block;
              content:'';
              overflow:hidden;
              width:100%;
              height: 0;
            }
          }
        }
        .check_content {
          li {
            padding: 10rpx 0;
            div {
              padding: 0;
            }
            div:nth-child(even) {
              padding: 20rpx 0;
              border-bottom: 1px solid #E9E9E9;
            }
          }
        }
      }
      .check_center {
        height: 90rpx;
        width: 100%;
        padding: 0;
        img {
          height: 100%;
          width: 108.7%;
          margin-left: -4.3%;
        }
      }
      .msg_bottom {
          background-color: #fff;
          box-shadow: 0rpx 10rpx 12rpx 1rpx rgba(0, 0, 0, 0.11);
          position: relative;
          width: 100%;
          z-index: 66;
          height: 80rpx;
          padding-left: 35rpx;
          box-sizing: border-box;
          border-radius: 0 0 8rpx 8rpx;
          img {
            float: left;
            height: 46rpx;
            width: 46rpx;
          }
          span {
            float: left;
            line-height: 48rpx;
            font-size: 32rpx;
            margin-left: 22rpx;
          }
          .info {
            color:rgba(74,113,232,1);
          }
          .success {
            color: #16D78D;
          }
      }
      .footer {
        margin-bottom: 30rpx;
        height: 100rpx;
        color:rgba(102,102,102,1);
        font-size: 18rpx;
        color: #666666;
        line-height: 95rpx;
        text-align: center;
        padding-left: 0rpx;
      }
    }
    .richText {
      display: inline-block;
      width: 125rpx;
    }
  }
</style>
